<template>
	<view class="page">
		<navigation textColor="#333333" barColor="#333333" defaultButton="back">高龄津贴</navigation>
		<view class="page_main">
			
			<form-picker name="高龄津贴发放地" v-model="model.allowanceAddress" placeholder="请选择高龄津贴发放地" rangeKey="name" rangeValue="id" :range="addressList"></form-picker>
			<view class="form-item">
				<view class="form-item__name disabled_name">待遇发放标准</view>
				<view class="form-item__value"><view class="form-item__value-input">{{userInfo.money||0}}元/月</view></view>
			</view>
			<form-input type="number" name="高龄补贴发放卡号" v-model="model.allowanceCarCode" placeholder="请输入银行卡号 "></form-input>
			<form-input name="卡号归属银行 " v-model="model.allowanceCarAddress" placeholder="请输入卡号归属银行"></form-input>
			<view class="form-item">
				<view class="form-item__name">认证模版照片</view>
				<view class="form-item__value">
					<view class="form-item__value-input-hint">
						请上传审核照片
					</view>
				</view>
			</view>
			<view class="photo_panel" @tap="photograph()">
				<image v-if="!model.image" class="form-item__value-image" src="/static/images/photo_bg.png" mode=""></image>
				<image v-else class="form-item__value-image" mode="aspectFill" :src="model.image"></image>
			</view>
		</view>
		<button class="page_btn" hover-class="page_btn-hover" @tap="submit">确认提交</button>
	</view>
</template>

<script>
	import * as modelApi from '@/api/userApi/model.js';
	import * as commonApi from '@/api/common.js';
	import { HTTP_SERVER_URL } from '@/config';
	export default {
		data() {
			return {
				HTTP_SERVER_URL,
				userInfo:this.$store.getters.getUserInfo,
				model: {
					allowanceCode: '',
					allowanceAddress: '',
					distributionStandard: '',
					timeType: '月',
					allowanceCarCode: '',
					allowanceCarAddress: '',
					image: '',
					money: '',
				},
				addressList: []
			};
		},
		onShow() {
			this.getAddress();
		},
		methods: {
			getAddress(){
				commonApi
					.querySettingCommunity()
					.then(res => {
						if (res.code === 0) { 
							this.addressList = res.data;
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			submit() {
				modelApi
					.allowance(this.model)
					.then(res => {
						if (res.code === 0) {
							uni.showToast({
								mask:true,
								title: '提交成功',
								duration: 1500
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1600);
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			photograph(type) {
				let self = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					sizeType: ['compressed', 'original'],
					success: res => {
						let url = '/institute/service-image/addImage';
						// #ifdef APP-PLUS || MP-WEIXIN
						url = HTTP_SERVER_URL + url;
						// #endif
						uni.uploadFile({
							url,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: uploadRes => {
								this.$set(this.model,'image',JSON.parse(uploadRes.data).data);
							},
							fail: uploadErr => {
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="stylus">
	.page_main {
		padding 0rpx 30rpx;
		box-sizing border-box;
	}
	.form-item__value-input-hint {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
	}

	.page_btn {
		position absolute;
		top 1150rpx;
		right 30rpx;
		left 30rpx;
	}
</style>
